<template>
    <div class="balance-panel">
        <div
            class="balance-panel-record"
            @click="goWithdrawHistory"
        >
            <img
                src="../../../assets/images/withdraw_record_icon.svg"
            />
            {{ $t("Record") }}
        </div>
        <div class="balance-panel-title">{{ $t("Balance") }}</div>
        <div class="balance-panel-num">
            {{ vueState.countryInfo.currencySymbol
            }}{{ vueState.pageInfo.totalAmount }}
        </div>
        <div class="balance-panel-main">
            <div class="sign">≈</div>
            <div class="coin-num">
                <img src="../../../assets/images/icon_coin.svg" />
                {{ vueState.pageInfo.totalCoin }}
            </div>
        </div>
    </div>
</template>
<script>
import {inject} from 'vue'
import {useRouter} from 'vue-router'
export default {
    props:{
        type:{
            default:''
        }
    },
    setup(props) {
        const router = useRouter()
        const vueState = inject('vueState')
        const goWithdrawHistory = ()=> {
            if(!vueState.pageInfo.mobile){
                window.SDKPostMessage({
                    event:'h5_open_page',
                    data:{
                        target:'bind_mobile',
                        data:{
                            page:'withdrawpage',
                            showEvent:'showwithdrawbind',
                            clickEvent:'clickwithdrawbind'
                        }
                    }
                })
                return
            }
            router.push({name:'withdrawRecord'})
        }
        return {
            vueState,
            goWithdrawHistory
        }
    }
}
</script>
<style lang="less" scoped>
.balance-panel {
    padding: 0.16rem 0.16rem 0.2rem;
    &-record {
        img {
            width: 0.24rem;
            height: 0.24rem;
        }
        font-size: 0.16rem;
        font-weight: 700;
        color: #222222;
        line-height: 0.2rem;
        background-size: 0.18rem 0.18rem;
        padding-left: 0.22rem;
        .xe;
        .aic;
    }
    &-title {
        line-height: 0.18rem;
        font-size: 0.14rem;
        font-weight: 400;
        color: rgba(136, 136, 136, 0.72);
        text-align: center;
        margin-top: 0.14rem;
    }
    &-num {
        height: 0.42rem;
        font-size: 0.32rem;
        font-weight: 700;
        color: #222222;
        letter-spacing: 0px;
        margin-top: 0.08rem;
        .xc;
        .aic;
    }
    &-main {
        margin-top: 0.05rem;
        .xc;
        .aic;
        .coin-num {
            .xs;
            .aic;
            img {
                width: 0.24rem;
                height: 0.24rem;
            }
            font-size: 0.2rem;
            font-weight: 700;
            color: #222222;
            letter-spacing: 0px;
        }
        .sign {
            font-size: 0.18rem;
            font-weight: 700;
            color: rgba(85, 85, 85, 0.64);
            letter-spacing: 0px;
            margin-right: 0.12rem;
        }
    }
}
    
</style>